<template>
	
	<div>
		<Hearder title="账户设置" listName="账户信息"></Hearder>
		<div class="count">
			<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="头像" prop="avatar">
				<el-upload
              class="avatar-uploader"
              action="/api/upload/oss.do?folder=brand"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <!-- 显示图片 -->
              <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
			</el-form-item>
			<el-form-item label="用户名" prop="username">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="Email" prop="email">
				<el-input type="email" v-model="ruleForm.email" autocomplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass">
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="旧密码" prop="age">
				<el-input v-model.number="ruleForm.oldPass"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm()">提交</el-button>
				<el-button @click="resetForm()">重置</el-button>
			</el-form-item>
		</el-form>
		</div>
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				
				ruleForm: {
					pass: '',
					oldPass: '',
					checkPass: '',
					username: '',
					email: '',
					avatar: '',
				},
				
			}
		},
		created(){

		},
		methods: {
			handleAvatarSuccess(res){
				this.$set(this.ruleForm,'avatar',res)

			},
			async fetchData(){
				const res = await this.$http.get(``);
			},
			resetForm(){
				this.ruleForm = {};
			},
			async submitForm(){

			}
		},
}
	
</script>
<style scoped>
.avatar-uploader{
 width: 120px;
 border: 1px dashed #d9d9d9;
 border-radius: 6px;
 cursor: pointer;
 position: relative;
 overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.count {
	width: 600px;
	margin: 0 auto;
}
</style>